<template>
  <m-page-wrapper>
    <m-crud ref="crudRef" :option="option">
    </m-crud>
    <SettingAuth ref="settingAuthRef" />
    <UserList ref="userListRef" />
  </m-page-wrapper>
</template>
<script setup lang="ts">
import { h, ref } from 'vue'
import { CrudType } from '/@/components/Crud/types';
import SettingAuth from './settingAuth.vue';
import UserList from './userList.vue';
import { Button, message } from 'ant-design-vue';

// 自我封装
import useMqtt from "/@/utils/mqtt";
const { startMqtt } = useMqtt();

const crudRef = ref()
const settingAuthRef = ref()
const userListRef = ref()
const option = ref<CrudType>({
  // 弹窗类型
  // dialogType: 'drawer',
  // 弹窗属性
  dialogProps: {
    width: '60%'
  },
  // 表单属性
  formProps: {
    labelWidth: '100px',
    // labelCol: { flex: '100px' },
  },
  // 标题
  title: '角色',
  // 列表接口
  api: '/Roles/GetRoleList',
  // 添加保存接口
  saveApi: '/Roles/CreateRole',
  // 添加保存接口
  updateApi: '/Roles/EditRole',
  // 删除接口
  delApi: '/Roles/DeleteRole',
  // 添加的权限码
  addPerms: 'sys:role:save',
  // 修改的权限码
  editPerms: 'sys:role:update',
  // 查看的权限码
  viewPerms: 'sys:role:detail',
  // 删除的权限码
  delPerms: 'sys:role:remove',
  columns: [
    {
      title: '角色ID',
      dataIndex: 'id',
      key: 'id',
      list: false,
      view: true,
      add: true,
      edit: true,
      component: 'Input',
      componentProps: {
        type: "text",
        maxlength: 20,
      },
      rules: [{ required: false, message: '请输入角色ID', trigger: 'blur' }]
    },
    {
      title: '应用编码',
      dataIndex: 'appCode',
      key: 'appCode',
      list: false,
      view: true,
      add: true,
      edit: true,
      component: 'Input',
      componentProps: {
      },
      rules: [{ required: false, message: '请输入应用编码', trigger: 'blur' }]
    },
    {
      title: '角色名称',
      dataIndex: 'name',
      key: 'name',
      search: true,
      searchType: "EQ",
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'Input',
      componentProps: {
      },
      rules: [{ required: false, message: '请输入角色名称', trigger: 'blur' }]
    },
    {
      title: '唯一编码',
      dataIndex: 'code',
      key: 'code',
      search: true,
      searchType: "EQ",
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'Input',
      componentProps: {
      },
      rules: [{ required: false, message: '请输入唯一编码', trigger: 'blur' }]
    },
    {
      title: '角色类型',
      // dataIndex: 'roleType',
      // key: 'roleType',
      dataIndex: 'permissions',
      key: 'permissions',
      search: true,
      searchType: "EQ",
      list: true,
      view: true,
      add: true,
      edit: true,
      // defaultValue: "guest",
      component: 'Dict',
      // component: 'Select',
      componentProps: {
        code: "sys_role_role_type",
        placeholder: '请选择类型',
        //   suffixIcon(){
        //   return h(HeartFilled)
        // },
        dropdownRenderAfter() {
          return h('div', {
            style: {
              padding: '4px 8px',
              cursor: 'pointer'
            }
          }, [h(Button, {
            type: 'link',
            onMousedown(e: any) {
              e.preventDefault()
            },
            onClick() {
              // const size = formRef.value.getComponentRef('type').getOptions()?.length
              // formRef.value.getComponentRef('type').addOption({
              //   label: '类型' + (size + 1),
              //   value: size + 1
              // })

              console.log('添加222222');

            }
          }, {
            default() {
              return "添加"
              // return ["administrator","guest","admini"]
            }
          })])
        },


      },
      rules: [{ required: false, message: '请输入角色类型', trigger: 'blur' }],

    },
    {
      title: '是否启用',
      dataIndex: 'enabled',
      key: 'enabled',
      list: true,
      view: true,
      add: true,
      edit: true,
      defaultValue: 1,
      component: 'Dict',
      componentProps: {
        renderType: "RadioGroup",
        code: "yes_no",
      },
      rules: [{ required: false, message: '请输入是否启用', trigger: 'blur' }]
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'Input',
      componentProps: {
      },
      rules: [{ required: false, message: '请输入备注', trigger: 'blur' }]
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      list: false,
      view: false,
      add: false,
      edit: false,
      component: 'DatePicker',
      componentProps: {
        valueFormat: "YYYY-MM-DD",
        mode: "date",
        format: "YYYY-MM-DD",
      },
      rules: [{ required: false, message: '请输入创建时间', trigger: 'blur' }]
    },
    {
      title: '创建用户',
      dataIndex: 'createUser',
      key: 'createUser',
      list: false,
      view: false,
      add: false,
      edit: false,
      component: 'Input',
      componentProps: {
        type: "text",
      },
      rules: [{ required: false, message: '请输入创建用户', trigger: 'blur' }]
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      list: false,
      view: false,
      add: false,
      edit: false,
      component: 'DatePicker',
      componentProps: {
        valueFormat: "YYYY-MM-DD",
        mode: "date",
        format: "YYYY-MM-DD",
      },
      rules: [{ required: false, message: '请输入更新时间', trigger: 'blur' }]
    },
    {
      title: '更新用户',
      dataIndex: 'updateUser',
      key: 'updateUser',
      list: false,
      view: false,
      add: false,
      edit: false,
      component: 'Input',
      componentProps: {
        type: "text",
      },
      rules: [{ required: false, message: '请输入更新用户', trigger: 'blur' }]
    },
    {
      title: '是否删除',
      dataIndex: 'isDeleted',
      key: 'isDeleted',
      list: false,
      view: false,
      add: false,
      edit: false,
      component: 'Input',
      componentProps: {
        type: "text",
      },
      rules: [{ required: false, message: '请输入是否删除', trigger: 'blur' }]
    },]
  ,
  dropdownActions: [{
    label: '设置权限',
    icon: 'SettingOutlined',
    divider: true,
    perms: 'sys:rbac:saveRoleMenu',
    orderNo: 90,
    onClick(e: any, row: any) {
      settingAuthRef.value?.show(row?.record)
    }
  }, {
    label: '成员管理',
    icon: 'TeamOutlined',
    divider: true,
    perms: 'sys:rbac:userListByRoleId',
    orderNo: 90,
    onClick(e: any, row: any) {
      userListRef.value?.show(row?.record)
    }
  },

  ]
})


let arr: any[];
startMqtt(
  ["topic/browser1", "topic/browser2", "topic/browser3"],
  (topic: any, message: any) => {
    const msg = JSON.parse(message.toString());
    arr.unshift(msg);
    console.log(unique(arr))
  }
);
//这里我每秒都会接收到数据 进行数据去重
function unique(arr:any) {
  const res = new Map();
  return arr.filter((a:any) => !res.has(a.UUID) && res.set(a.UUID, 1));

}
</script>
<style lang="less" scoped></style>